<template>
    <div>
        <div class="container">
            <div style="float: left;width: 50%;text-align: center">
                <i class="el-icon-chat-dot-round" @click="switchMode('conversation')"
                   :style="{color: conversationIconStyle}"></i>
            </div>
            <div style="display: inline-block;width: 50%;text-align: center">
                <i class="el-icon-s-custom" @click="switchMode('friend')" :style="{color: friendIconStyle}"></i>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'choiceCard',
    data () {
      return {
        conversationIconStyle: '#3fb982',
        friendIconStyle: ''
      }
    },
    methods: {
      switchMode (event) {
        console.log(event)
        switch (event) {
          case 'conversation':
            this.conversationIconStyle = '#3fb982'
            this.friendIconStyle = ''
            // 跳转到聊天页面
            this.$router.push({path: '/main/conversation'}).catch(() => {
              this.warning()
            })
            break
          case 'friend':
            this.conversationIconStyle = ''
            this.friendIconStyle = '#3fb982'
            // 跳转到聊天页面
            this.$router.push({path: '/main/friend'}).catch(() => {
              this.warning()
            })
            break
        }
      },
      warning () {
        this.$notify({
          title: '报告君上',
          message: '您已经在这里了哟!',
          type: 'warning',
          duration: 1500
        })
      }
    }
  }
</script>

<style scoped>
    .container {
        height: 30px;
    }

    .container i {
        font-size: 20px;
    }

    .el-icon-s-custom {
        margin: 5px;
    }

    .el-icon-chat-dot-round {
        margin: 5px;
    }

    .el-divider--horizontal {
        margin: 0;
    }
</style>
